<template>
  <div>
    <a-page>
      <!-- Table header row -->
      <a-row type="flex" justify="space-between" align="middle" style="font-weight: bold; margin-bottom: 20px;">
        <a-col :span="2">名字</a-col>
        <a-col :span="2">照片</a-col>
        <a-col :span="2">简述</a-col>
        <a-col :span="2">上架时间</a-col>
        <a-col :span="6">套餐包含</a-col>
        <a-col :span="2">数量</a-col>
        <a-col :span="2">价格</a-col>
      </a-row>
      <!-- Table body rows (data) -->
      <div v-if="food.length!==0"  v-for="(item, index) in food" :key="index">
        <a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 10px;">
          <a-col :span="2">{{ item.comboName }}</a-col>
          <a-col :span="2">
            <img :src="item.comboImg" alt="Food Image" style="width: 50px; height: 50px;" />
          </a-col>
          <a-col :span="2">{{ item.comboBriefly }}</a-col>
          <a-col :span="2">{{ item.createTime }}</a-col>
          <!-- 套餐包含，内容超过 span=6 时换行 -->
          <a-col :span="6" style="white-space: normal; word-break: break-word;">{{ item.comboContain }}</a-col>
          <a-col :span="2">{{ item.comboNum }}</a-col>
          <a-col :span="2">${{ item.comboPrice }}</a-col>
        </a-row>

      </div>
      <div v-else>
        <a-result
            status="success"
            title="还没有未上架的商品"
            sub-title="你好，亲爱的至减管理员"
        ></a-result>
      </div>
    </a-page>

    <!-- Pagination -->
    <a-pagination
        v-model:current="current1"
        show-quick-jumper
        :total="total"
        @change="onChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import myaxios from "../../Axios/myaxios";

const current1 = ref<number>(1);
const food = ref<any[]>([]);
const total = ref<number>(0);

const fetchData = async (page: number) => {
  try {
    const response = await myaxios.get('/foodCombo/AdminSelectUpFoodCombo', {
      params: {
        page: page,
        size: 10 // Number of items per page
      }
    });


    food.value = response.data.records.map((item: any) => ({
      comboName: item.comboName,
      comboBriefly: item.comboBriefly,
      comboImg: item.comboImg,
      comboContain: item.comboContain,
      comboPrice: item.comboPrice,
      comboNum: item.comboNum,
      createTime: item.createTime
    }));
    console.log(food.value, "你好")
    total.value = response.data.total; // Update total items count for pagination
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

onMounted(() => {
  fetchData(current1.value);
});

const onChange = (pageNumber: number) => {
  current1.value = pageNumber;
  fetchData(pageNumber);
};
</script>

<style>
demo-page-header :deep(tr:last-child td) {
  padding-bottom: 0;
}
</style>
